<template>
  <SLayout>
    <!--    <SearchForm ref="searchRef" @search="flushedTable" />-->
    <SLayoutContent>
      <n-card>
        <Toolbar ref="toolRef" @getDataList="()=>tableRef?.getList()"/>
        <SDataTable
            ref="tableRef"
            type="page"
            :columns="columns"
            @getData="getData"
            option
            :update-click="updateClick"
            :delete-click="deleteClick"
            :disabled-delete="disabledDelete"
        />
      </n-card>
      <!--      <Drawer v-model:drawerShow="drawerShow" :selected="selected"/>-->
    </SLayoutContent>
  </SLayout>
</template>
<script setup>
import SLayout from "@/components/ExtLayout/SLayout.vue";
import SDataTable from "@/components/public/SDataTable.vue";
import SLayoutContent from "@/components/ExtLayout/SLayoutContent.vue";
import Toolbar from "./toolbar/Toolbar.vue";
import {querySongList} from "@/api/music/songListApi";

const tableRef =ref();
const toolRef =ref();


function updateClick(row){
  toolRef.value?.openEdit(row,row.id)
}
function deleteClick(){

}
function disabledDelete(row){
  return true
}
function getData(callback,page,pageSize){

  querySongList(page,pageSize).then(res=>{
    callback(res.data || {})
  })

}

const columns = [
  {
    title: '名称',
    key: 'name',
    width:100,
  },
  {
    title: '创建人',
    key: 'cre',
    width:100,
    render(row){
      return row.singerVo?.name
    }
  },
  {
    title: '播放次数',
    key: 'playNum',
  },
  {
    title: '收藏次数',
    key: 'collectNum',
  },
  {
    title: '歌曲数量',
    key: 'musicLength',
  },
]

</script>